<template>
  <el-card class="contanier">
    <div slot="header" class="clearfix">
      <span>旅游数据概览</span>
      <div class="circle" style="float: right; padding: 3px 0">  
    <div  
      class="item"  
      @click="toggleActive('item1')"  
      :class="{ active: activeItem==='item1' }"  
    >  
       
    </div>  
    <div 
      class="item"  
      @click="toggleActive('item2')"  
      :class="{ active: activeItem==='item2' }"  
    >  
        
    </div>  
    <div  
      class="item"  
      @click="toggleActive('item3')"  
      :class="{ active: activeItem==='item3' }"  
    >  
       
    </div>  
    <div  
       
      class="item"  
      @click="toggleActive('item4')"  
      :class="{ active: activeItem==='item4' }"  
    >  
      
    </div>  
  </div>  
    </div>
    <div>

    </div>
  </el-card>
</template>

<script> 
import { gettraveldata} from "@/api/travel";

export default {  
  data() {  
    return {  
      activeItem:'item1' , // 用来跟踪当前活动的元素  
    };  
  },
  mounted(){    
    this.initdata()
  },
  methods: {  
    toggleActive(itemName) {  
      // 切换活动的元素  
      this.activeItem = itemName;  
    }, 
    async initdata() {
      let result = await gettraveldata();
      console.log(result);
      if (result.status == 0) {
        this.$store.dispatch("user/getall", result.data);
      }
    },
  },  
};  
</script>  
  
</script>

<style scoped>
.active{
    background-color: #7C7877 !important;
}
.contanier {
  margin: 30px;
  width: 40%;
  height: 500px;
  .clearfix{
    .circle{
        display: flex;
        .item{
            width:10px;
            height: 10px;
            border-radius: 50%;
            background-color:#eee;
            margin-right: 5px;
        }
    }
  }
}





</style>
